<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //封装函数防抖的方法操作，如果重复执行那么时间就一直顺延，判断是否立即执行
        function debounce(fn, delay = 50, immediate = false) {
            //定义一个时间对象，刚开始可以是null
            let timeout = null;

            return function () {
                //执行上下文对象信息
                let context = this;
                //传递参数
                let args = arguments;

                //如果当前时间还没到期，那么就清除定时器重新计时
                if (timeout) clearTimeout(timeout);
                //如果需要立即执行的话，可以判断一下立即指向函数对象
                if (immediate) {
                    //定义立即执行操作的标识符
                    let callNow = !timeout;//刚开始就里面执行一次

                    //每次倒计时结束以后把timeout制空
                    timeout = setTimeout(()=>{
                        timeout = null
                    },delay)

                    //判断逻辑执行操作
                    if(callNow){
                        fn.apply(context,args);
                    }

                } else {
                    timeout = setTimeout(() => {
                        //执行函数到时间后调用函数信息。
                        fn.apply(context, args);
                    }, delay)
                }
            }
        }

        //监听页面尺寸改变代表防抖函数处理
        window.addEventListener("resize",debounce(()=>{
            console.log("页面尺寸发生改变",Date.now())
        },1500,false));
    </script>
</body>

</html>